<script lang="ts">
import { h, defineComponent, ref, onMounted, onUpdated, } from 'vue'
import MarkdownIt from 'markdown-it' // https://markdown-it.docschina.org/

export default defineComponent({
  components: {},
  props: {
    linkify: {
      type: Boolean,
      default: false,
    },
    breaks: {
      type: Boolean,
      default: false,
    },
    html: {
      type: Boolean,
      default: false,
    },
    source: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const md = ref()

    const renderMarkdown = () => {
      const markdown = new MarkdownIt({
        breaks: props.breaks, // 转换段落里的 '\n' 到 <br>。
        html: props.html, // 在源码中启用 HTML 标签
        linkify: props.linkify, // 将类似 URL 的文本自动转换为链接。
        quotes: props.quotes,
      })

      md.value = markdown.render(props.source)
    }

    onMounted(() => renderMarkdown())
    onUpdated(() => renderMarkdown())

    return () => h('div', { innerHTML: md.value, className: 'app-markdown-container' })
  },
})
</script>

<style lang="scss">
.app-markdown-container {
  padding: 25px;
  p{
    margin: 10px 0;
    color: #222;
  }
  h1 {
    min-height: 28px;
  }
  h2 {
    min-height: 23px;
    font-size: 22px;
    line-height: 23px;
    border-bottom: 1px solid #dbdbdb;
    margin: 20px 0 13px;
    padding-bottom: 7px;
  }
  blockquote {
    min-height: 20px;
  }
  li {
    min-height: 22px;
  }
}
</style>
